<template>
  <div>
    <el-card class="app-page">
      <!-- <div class="content"> -->
      <table-search :search-form="queryFormItem" :on-submit="handleQuery" />
      <div />
      <!-- </div> -->
    </el-card>
    <el-card class="table">
      <TablePaging
        :table-list="deviceList"
        border
        :table-column="deviceTableColumn"
        :table-buttons="deviceTableButtons"
        :table-btn-width="180"
        :table-paging="deviceTablePaging"
        :table-total="deviceTableTotal"
        @pagingChange="handlePaginChange"
      />
    </el-card>
  </div>
</template>

<script>
import { fetchDeviceFindPage, fetchDeviceGet } from '@/api/basicinfo/device'
import { TableSearch, TablePaging } from '@/components'
import { queryFormItem, tableColumn } from './config'

export default {
  name: 'Device',
  components: { TableSearch, TablePaging },
  data() {
    return {
      queryFormData: {},
      queryFormItem,
      deviceTableColumn: tableColumn(1, 10),
      deviceList: [],
      deviceTableButtons: [
        // 设备表操作按钮
        {
          name: '浏览',
          click: ''
        },
        {
          name: '修改',
          click: this.handleEdit
        },
        {
          name: '删除',
          click: this.handleDelete
        }
      ],

      deviceTableTotal: 0,
      deviceTablePaging: {
        page: 1,
        pagesize: 10
      },
      dialogTitle: '添加', // 弹窗标题
      dialogVisible: false, // 弹窗显示隐藏
      modalFormData: {}, // 弹窗表单数据
      deviceCodeDisabled: false // 设备号是否禁止修改
    }
  },
  created() {
    this.postFindPage()
  },
  methods: {
    handleQuery(values) {
      // 查询点击
      this.queryFormData = values
      this.deviceTablePaging = {
        page: 1,
        pagesize: 10
      }
      this.postFindPage()
    },

    handleAdd() {
      // 新增
      this._setModalData()
    },

    handleEdit(id) {
      // 修改
      fetchDeviceGet({ id }).then(res => {
        this._setModalData('修改', true, res)
      })
    },

    handleDelete(id) {
      this.$confirm('是否删除此设备?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.postDeviceDelete(id)
        })
        .catch(() => {})
    },

    handleModalSubmit(values) {
      // 弹窗表单提交
      if (values.id) {
        this.postDeviceUpdate(values)
        return false
      }
      this.postDeviceAdd(values)
    },

    handlePaginChange(pageInfo) {
      // 分页改变
      this.deviceTablePaging = pageInfo
      this.postFindPage()
      const { page, pagesize } = pageInfo
      this.deviceTableColumn = tableColumn(page, pagesize)
    },

    _setModalData(title = '创建业务', visible = true, formData = {}) {
      // 设置弹窗
      this.modalFormData = formData
      this.dialogTitle = title
      this.dialogVisible = visible
      this.deviceCodeDisabled = title !== '添加'
    },

    postFindPage() {
      // 获取列表
      fetchDeviceFindPage({
        ...this.queryFormData,
        ...this.deviceTablePaging
      }).then(res => {
        const { records, current, size, total } = res
        this.deviceList = records
        this.deviceTablePaging = {
          page: current,
          pagesize: size
        }
        this.deviceTableTotal = total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-page {
  min-height: 0;
}
.table {
  margin-top: 20px;
  min-height: 100vh;
}
</style>
